<template>
  <custom-navbar title="新增在线简历" :auto-back="true" left-icon-color="#303133" />
  <up-gap height="30rpx" />
  <view @click="toPage('/pages/tab/home/more/preference?type=1')" class="block-box">
    <view class="flex items-center justify-between">
      <view class="">
        <view class="mb-20rpx flex items-center text-30rpx color-#1D2129 leading-42rpx">
          <text>{{resumeDetail.intention?resumeDetail.intention.nature:''}}</text>
          <up-line length="30rpx" color="#4f5760" direction="col" margin="0 12rpx" />
          <text>意向
            ({{resumeDetail.intention?resumeDetail.intention.province:''}}·{{resumeDetail.intention?resumeDetail.intention.city:''}})</text>
        </view>
        <view class="flex items-center text-26rpx color-#4e5969 leading-36rpx">
          <text>{{resumeDetail.intention?resumeDetail.intention.position_type:''}}·{{resumeDetail.intention?resumeDetail.intention.position:''}}</text>
          <up-line length="30rpx" color="#4e5969" direction="col" margin="0 12rpx" />
          <text>{{resumeDetail.intention?resumeDetail.intention.salary_min:''}}k-{{resumeDetail.intention?resumeDetail.intention.salary_max:''}}k</text>
        </view>
      </view>
      <view>
        <up-icon :name="Img5" width="24rpx" height="42rpx" />
      </view>
    </view>
  </view>
  <view class="block-box leading-36rpx">
    <view class="mb-24rpx flex items-center">
      <view class="mr-16rpx h-100rpx w-100rpx shrink-0">
        <up-image width="100rpx" height="100rpx" shape="circle"
          :src="resumeDetail.userInfo?resumeDetail.userInfo.avatar:''" />
      </view>
      <view class="flex-auto">
        <view class="mb-16rpx flex items-center justify-between">
          <view class="text-32rpx color-#1d2129">
            {{resumeDetail.userInfo?resumeDetail.userInfo.name:''}}
          </view>
        </view>
        <view class="flex text-26rpx color-#4f5760 leading-100%">
          <text>籍贯:
            {{resumeDetail.userInfo?resumeDetail.userInfo.province:''}}·{{resumeDetail.userInfo?resumeDetail.userInfo.city:''}}</text>
          <up-line length="30rpx" color="#4f5760" direction="col" margin="0 12rpx" />
          <text>{{resumeDetail.userInfo?resumeDetail.userInfo.gender:''}}</text>
          <up-line length="30rpx" color="#4f5760" direction="col" margin="0 12rpx" />
          <text>{{resumeDetail.userInfo?resumeDetail.userInfo.qualification:''}}</text>
          <up-line length="30rpx" color="#4f5760" direction="col" margin="0 12rpx" />
          <text>{{resumeDetail.userInfo?resumeDetail.userInfo.nature:''}}</text>
        </view>
      </view>
    </view>
    <view class="mb-20rpx text-26rpx color-#4e5969">
      手机: {{resumeDetail.userInfo?resumeDetail.userInfo.phone:''}}
    </view>
    <view class="text-26rpx color-#4e5969">
      邮箱: {{resumeDetail.userInfo?resumeDetail.userInfo.email:''}}
    </view>
  </view>
  <view class="block-box py-0">
    <view class="flex items-center b-b-1rpx b-b-#ebebeb b-b-solid py-22rpx" v-for="item in resumeDetail.educationList">
      <view class="mr-20rpx shrink-0">
        <up-image width="44rpx" height="44rpx" shape="circle"
          :src="resumeDetail.userInfo?resumeDetail.userInfo.avatar:''" />
      </view>
      <view>
        <view class="mb-10rpx text-30rpx color-#1d2129 leading-42rpx">
          {{item.school_name}}
        </view>
        <view class="flex text-24rpx color-#4e5969 leading-34rpx">
          <text>{{item.time}}</text>
          <up-line length="30rpx" color="#4f5760" direction="col" margin="0 12rpx" />
          <text>{{item.qualification}}</text>
          <up-line length="30rpx" color="#4f5760" direction="col" margin="0 12rpx" />
          <text>{{item.majors_name}}</text>
          <up-line length="30rpx" color="#4f5760" direction="col" margin="0 12rpx" />
          <text>{{item.status_overseas_study}}</text>
        </view>
      </view>
    </view>
  </view>
  <view class="block-box">
    <!--    <view>-->
    <view class="mb-30rpx flex items-center justify-between">
      <view class="text-32rpx color-#1D2129 leading-44rpx">
        个人亮点
      </view>
      <navigator :url="`/pages/userinfo/resume-personalHighlights?resumeId=${resumeId}`"
        class="w-[112rpx] rounded-[22rpx] bg-#f7f7f8 text-center text-22rpx color-#1d2129 leading-44rpx">
        编辑
      </navigator>
    </view>
    <!--      <view class="flex flex-wrap gap-20rpx pb-40rpx">-->
    <!--        <view class="rounded-full  px-24rpx text-center text-22rpx color-#F57100 leading-54rpx bg-#fcf8e9" v-for="item in tabList">-->
    <!--          {{item}}-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="flex flex-wrap gap-20rpx">
      <view class="rounded-[22rpx] bg-#fcf8e9 px-24rpx text-center text-22rpx color-#F57100 leading-54rpx"
        v-for="ite in resumeDetail.highlightsList">
        {{ite}}
      </view>
    </view>
  </view>
  <view class="block-box">
    <view class="mb-30rpx flex items-center justify-between">
      <view class="text-32rpx color-#1D2129 leading-44rpx">
        科研经历
      </view>
      <view
        class="flex items-center rounded-[22rpx] bg-#f7f7f8 p-4rpx pr-16rpx text-center text-22rpx color-#1d2129 leading-44rpx">
        <up-icon :name="Img6" width="36rpx" height="36rpx" />
        <navigator :url="`/pages/userinfo/resume-researchExperience?resumeId=${resumeId}`" class="ml-8rpx">
          添加
        </navigator>
      </view>
    </view>
    <view class="leading-34rpx">
      <view class="" v-for="(item, index) in scientificList" :key="index">
        <view class="mb-32rpx flex items-center text-28rpx color-#333333">
          <text>{{item.qualification}}</text>
          <up-line length="30rpx" color="#333333" direction="col" margin="0 12rpx" />
          <text>{{item.school_name}}</text>
        </view>
        <view class="mb-30rpx flex items-center" v-for="(i, sub) in item.researchExperienceList" :key="sub">
          <view class="mr-56rpx shrink-0 color-#999999">
            {{ i.label }}
          </view>
          <view class="color-#333333">
            {{ i.value }}
          </view>
        </view>
        <view class="flex flex-wrap gap-20rpx b-b-1rpx b-b-#ebebeb b-b-solid pb-20rpx">
          <view class="rounded-full bg-#edeef0 px-24rpx color-#4E5969 leading-54rpx">
            导师:{{item.mentor_name}}
          </view>
          <view class="rounded-full bg-#edeef0 px-24rpx color-#4E5969 leading-54rpx">
            {{item.author_order}}
          </view>
          <view class="rounded-full bg-#edeef0 px-24rpx color-#4E5969 leading-54rpx">
            {{item.paper_status}}
          </view>
          <view class="rounded-full bg-#edeef0 px-24rpx color-#4E5969 leading-54rpx">
            {{item.journals_type}}
          </view>
        </view>
      </view>
    </view>

    <view class="flex items-center justify-center pt-24rpx text-26rpx color-#333333"
      v-if="scientificList.length > 0&&scientificList.length >2">
      <text>更多{{scientificList.length-1}}个科研经历</text>
      <up-icon :name="Img5" width="24rpx" height="42rpx" />
    </view>
  </view>
  <view class="block-box">
    <view class="mb-30rpx flex items-center justify-between">
      <view class="text-32rpx color-#1D2129 leading-44rpx">
        实习经历
      </view>
      <view
        class="flex items-center rounded-[22rpx] bg-#f7f7f8 p-4rpx pr-16rpx text-center text-22rpx color-#1d2129 leading-44rpx">
        <up-icon :name="Img6" width="36rpx" height="36rpx" />
        <navigator :url="`/pages/userinfo/resume-internshipExperience?resumeId=${resumeId}`" class="ml-8rpx">
          添加
        </navigator>
      </view>
    </view>
    <view class="mb-22rpx flex items-center justify-between b-b-1rpx b-b-#ebebeb b-b-solid pb-22rpx"
      v-for="item in resumeDetail.jobShowList">
      <view>
        <view class="mb-10rpx text-30rpx color-#1d2129 leading-42rpx">
          {{item.department}}
        </view>
        <view class="flex text-24rpx color-#4e5969 leading-34rpx">
          <text>{{item.time}}</text>
          <up-line length="30rpx" color="#4f5760" direction="col" margin="0 12rpx" />
          <text>{{item.position}}</text>
        </view>
      </view>
      <view class="rounded-full bg-#fff3e8 px-24rpx text-22rpx color-#fd8b25 leading-44rpx">
        待完善
      </view>
    </view>
    <view class="flex items-center justify-center pt-24rpx text-26rpx color-#333333"
      v-if="resumeDetail.jobShowCount > 0">
      <text>更多{{resumeDetail.jobShowCount}}个实习经历</text>
      <up-icon :name="Img5" width="24rpx" height="42rpx" />
    </view>
  </view>
  <view class="block-box">
    <view class="mb-30rpx flex items-center justify-between">
      <view class="text-32rpx color-#1D2129 leading-44rpx">
        在校经历
      </view>
      <view
        class="flex items-center rounded-[22rpx] bg-#f7f7f8 p-4rpx pr-16rpx text-center text-22rpx color-#1d2129 leading-44rpx">
        <up-icon :name="Img6" width="36rpx" height="36rpx" />
        <navigator :url="`/pages/userinfo/resume-schoolExperience?resumeId=${resumeId}`" class="ml-8rpx">
          添加
        </navigator>
      </view>
    </view>
    <view class="mb-22rpx flex items-center justify-between b-b-1rpx b-b-#ebebeb b-b-solid pb-22rpx"
      v-for="item, index in resumeDetail.schoolShowList">
      <view>
        <view class="mb-10rpx text-30rpx color-#1d2129 leading-42rpx">
          {{item.department}}
        </view>
        <view class="flex text-24rpx color-#4e5969 leading-34rpx">
          <text>{{item.time}}</text>
          <up-line length="30rpx" color="#4f5760" direction="col" margin="0 12rpx" />
          <text>{{item.position}}</text>
        </view>
      </view>
      <view class="rounded-full bg-#fff3e8 px-24rpx text-22rpx color-#fd8b25 leading-44rpx">
        待完善
      </view>
    </view>
    <view class="flex items-center justify-center pt-24rpx text-26rpx color-#333333"
      v-if="resumeDetail.schoolShowCount > 0">
      <text>更多{{resumeDetail.schoolShowCount}}个在校经历</text>
      <up-icon :name="Img5" width="24rpx" height="42rpx" />
    </view>
  </view>
  <view class="block-box">
    <view class="mb-30rpx flex items-center justify-between">
      <view class="text-32rpx color-#1D2129 leading-44rpx">
        技能及证书
      </view>
      <navigator class="w-[112rpx] rounded-[22rpx] bg-#f7f7f8 text-center text-22rpx color-#1d2129 leading-44rpx"
        @click="routerToSkill(resumeId)">
        添加
      </navigator>
    </view>

    <view class="mb-26rpx b-b-1rpx b-b-#ebebeb b-b-solid pb-22rpx" v-for="itemList, key in resumeDetail.skill">
      <view class="mb-24rpx text-28rpx color-#4e5969">
        {{key}}:
      </view>
      <view class="flex flex-wrap gap-20rpx">
        <view class="rounded-full bg-#edeef0 px-24rpx color-#4E5969 leading-54rpx" v-for="item in itemList">
          {{item}}
        </view>
      </view>
    </view>
  </view>
  <view class="block-box">
    <view class="mb-30rpx flex items-center justify-between">
      <view class="text-32rpx color-#1D2129 leading-44rpx">
        个人荣誉
      </view>
      <view
        class="flex items-center rounded-[22rpx] bg-#f7f7f8 p-4rpx pr-16rpx text-center text-22rpx color-#1d2129 leading-44rpx">
        <up-icon :name="Img6" width="36rpx" height="36rpx" />
        <navigator :url="`/pages/userinfo/resume-personalHonors?resumeId=${resumeId}`" class="ml-8rpx">
          添加
        </navigator>
      </view>
    </view>
    <view v-for="(item, index) in personalHonors" :key="index" class="py-22rpx" :class="{
        'b-b-1rpx b-b-#ebebeb b-b-solid': personalHonors.length - 1 !== index,
      }">
      <view class="mb-10rpx text-30rpx color-#1d2129 leading-42rpx">
        {{ item.text }}
      </view>
      <view class="flex text-24rpx color-#4e5969 leading-34rpx">
        <text>{{dateFormat(item.date)}}</text>
      </view>
    </view>
  </view>
  <view class="block-box">
    <view class="mb-30rpx flex items-center justify-between">
      <view class="text-32rpx color-#1D2129 leading-44rpx">
        一句话打动HR
      </view>
      <navigator :url="`/pages/userinfo/resume-oneSentence?resumeId=${resumeId}`"
        class="w-[112rpx] rounded-[22rpx] bg-#f7f7f8 text-center text-22rpx color-#1d2129 leading-44rpx">
        编辑
      </navigator>
    </view>
    <view class="text-left text-[28rpx] text-[#333333] font-medium leading-[40rpx]">
      {{resumeDetail.heart_content}}
    </view>
  </view>
  <!--  <view class="block-box">-->
  <!--    <view class="mb-30rpx flex items-center justify-between">-->
  <!--      <view class="text-32rpx color-#1D2129 leading-44rpx">-->
  <!--        自定义加分项-->
  <!--      </view>-->
  <!--    </view>-->
  <!--    <view class="flex flex-wrap gap-20rpx">-->
  <!--      <up-button-->
  <!--        v-for="(item, index) in customBonusItems"-->
  <!--        :key="index"-->
  <!--        :icon="Img6"-->
  <!--        :custom-style="{-->
  <!--          background: '#f7f7f8',-->
  <!--          color: '#1d2129',-->
  <!--          width: 'auto',-->
  <!--          height: '68rpx',-->
  <!--          fontSize: '22rpx',-->
  <!--          paddingLeft: '20rpx',-->
  <!--          paddingRight: '20rpx',-->
  <!--          borderColor: 'transparent',-->
  <!--          margin: '0',-->
  <!--        }"-->
  <!--        shape="circle"-->
  <!--        :text="item"-->
  <!--      />-->
  <!--    </view>-->
  <!--  </view>-->
  <view>
    <view class="h-190rpx pb-safe" />
    <view class="fixed bottom-0 left-0 w-100% flex items-center justify-between bg-#fff px-24rpx pt-24rpx pb-safe">
      <up-button :custom-style="{
          background: '#f3f4fa',
          color: '#1D2129',
          width: '338rpx',
          height: '82rpx',
          fontSize: '30rpx',
        }" shape="circle" text="删除" @click="delResume(resumeDetail.id)" />
      <up-button :custom-style="{
          background: '#1f50f2',
          color: '#fff',
          width: '338rpx',
          height: '82rpx',
          fontSize: '30rpx',
        }" shape="circle" text="以HR视角预览" @click="routerToResumeDetail(resumeDetail.id)" />
    </view>
  </view>
</template>

<script setup lang="ts">
  // import Img5 from '@/static/images/userInfo/img-5.png';
  // import Img6 from '@/static/images/userInfo/img-6.png';
  import { userResumeDetail, userResumeDel, userResumeUpdate } from '@/api/user';
  import { ResumeAddResult, customerResumeAdd } from '@/api/user/customer';
  import { otherStore } from "@/store";
  const Img5 = "https://yiliao.test03.qcw800.com/static/images/userInfo/img-5.png";
  const Img6 = "https://yiliao.test03.qcw800.com/static/images/userInfo/img-6.png";
  const researchExperienceList : any = ref([]);
  const personalHonors : any = ref([]);
  const customBonusItems = ref([
    '科研经历',
    '实习经历',
    '在校经历',
    '技能及证书',
  ]);
  const dateFormat = (time) => {
    if (!time) {
      return ""
    }
    // 检查时间戳是否为秒单位，如果是，则乘以 1000 转换为毫秒
    if (time.toString().length === 10) {
      time = time * 1000;
    }
    let date = new Date(Number(time));
    let year = date.getFullYear();
    // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
    let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();


    return year + "." + month;

  };
  const toPage = (url : string) => {
    uni.navigateTo({
      url,
    });
  };

  const routerToResumeDetail = (resume_id : number) => {
    uni.navigateTo({
      url: '/pages/userinfo/resume-HRPerspective?resume_id=' + resumeId.value,
    });
  };

  const routerToSkill = (resume_id : number) => {
    uni.navigateTo({
      url: '/pages/userinfo/resume-skillsAndCertifications?resume_id=' + resumeId.value
    });
  };

  const delResume = async (resume_id : number) => {
    let result = await userResumeDel({ id: resumeId.value });
    console.log('删除简历:::', result);
    uni.navigateTo({
      url: '/pages/userinfo/resume'
    })
  }

  const resumeDetail : any = ref({})
  async function getResumeDetail(resume_id : number) {
    const r = await userResumeDetail({ resume_id: resume_id });
    console.log('简历详情 r:::', r);
    let rr : any = {} //结果汇总
    let intention = {}
    if (r.intention) {
      intention = {
        id: r.intention.id,
        nature: r.intention.nature,
        salary_min: r.intention.salary_min,
        salary_max: r.intention.salary_max,
        province: r.intention.province.name,
        city: r.intention.city.name,
        position_type: r.intention.position.p_content,
        position: r.intention.position.content
      }
    }
    rr.intention = intention
    let userInfo = {
      name: r.user.name,
      avatar: r.user.avatar,
      province: r.user.province.name,
      city: r.user.city.name,
      gender: r.user.gender,
      qualification: '未填写',
      nature: r.intention.nature || '',
      phone: r.user.phone,
      email: r.user.email
    }
    rr.userInfo = userInfo
    let educationList = []
    if (r.education && r.education.length > 0) {
      educationList = r.education.map(item => {
        return {
          school_name: item.school_name,
          time: item.time,
          qualification: item.qualification,
          majors_name: item.majors_name,
          status_overseas_study: item.status_overseas_study == 1 ? '留学' : '未留学'
        }
      })
      rr.userInfo.qualification = educationList[educationList.length - 1].qualification
    }
    rr.educationList = educationList
    let highlightsList = r.highlights;
    rr.highlightsList = highlightsList;
    let scientificListData = []

    if (r.scientific && r.scientific.length > 0) {
      scientificListData = r.scientific.map(item => {
        // let obj = {}
        return {
          id: item.id,
          qualification: r.education[0].qualification,
          school_name: r.education[0].school_name,
          // time: item.time,
          researchExperienceList: [
            {
              label: '课题时间',
              value: item.time,
            },
            {
              label: '研究方向',
              value: item.research_direction,
            },
            {
              label: '研究课题',
              value: item.research_subject,
            },
            {
              label: '课题描述',
              value: item.subject_info,
            },
            {
              label: '论文名称',
              value: item.paper_name,
            },
          ],
          mentor_name: item.mentor_name,              //导师
          author_order: item.author_order,            //作者顺序
          paper_status: item.paper_status,            //论文状态
          journals_type: item.journals_type,          //期刊类型
        }
      })
      scientificList.value = scientificListData
      console.log('scientificListData------', scientificListData);

    }


    let jobList = []  //实习经历
    if (r.job && r.job.length > 0) {
      jobList = r.job.map(item => {
        return {
          department: item.department,  //实习单位
          time: item.time,            //实习时间
          position: item.position,    //职位
          content: item.content,      //职责描述
        }
      })
    }
    rr.jobList = jobList;
    let jobShowList = jobList.slice(0, 3);
    rr.jobShowList = jobShowList
    rr.jobShowCount = jobList.length - jobShowList.length

    let schoolList = [] //在校经历
    if (r.school && r.school.length > 0) {
      schoolList = r.school.map(item => {
        return {
          department: item.department,  //部门
          time: item.time,            //时间
          position: item.position,    //职位
          content: item.content,      //职责描述
        }
      })
    }
    rr.schoolList = schoolList;
    let schoolShowList = schoolList.slice(0, 3);
    rr.schoolShowList = schoolShowList;
    rr.schoolShowCount = schoolList.length - schoolShowList.length


    let skill : any = {} //技能及证书
    if (r.skill && r.skill.length > 0) {
      // 先初始化所有类别
      for (let i = 0; i < r.skill.length; i++) {
        const r_skill = r.skill[i];
        skill[r_skill.skill_type.name] = [];
      }
      // 再将技能添加到对应类别
      for (let i = 0; i < r.skill.length; i++) {
        const r_skill = r.skill[i];
        skill[r_skill.skill_type.name].push(r_skill.name)
      }
    }
    rr.skill = skill;

    let honorList = [] //荣誉奖项
    if (r.honor && r.honor.length > 0) {
      honorList = r.honor.map(item => {
        return {
          text: item.name,
          date: item.time,
        }
      })
    }
    rr.honorList = honorList;
    console.log('个人荣誉:::', honorList)
    personalHonors.value = honorList;

    let heart_content = r.heart_content || ''; //一句话打动HR
    rr.heart_content = heart_content;
    resumeDetail.value = rr;

  }

  const resumeId = ref(0)

  async function addResume() {
    let r = await customerResumeAdd('新增简历');
    console.log('新增简历:::', r);
    if (r.intention) {
      let intention : any = {
        id: r.intention.id,
        nature: r.intention.nature,
        salary_min: r.intention.salary_min,
        salary_max: r.intention.salary_max,
        province: r.intention.province,
        city: r.intention.city,
        position_type: r.intention.position_type,
        position: r.intention.position
      }
      resumeDetail.value.intention = intention
    }
    if (r.educationList.length > 0) {
      resumeDetail.value.educationList = r.educationList
    }
    if (r.userInfo) {
      if (r.educationList.length > 0) {
        r.userInfo.qualification = r.educationList[0].qualification
      }
      if (r.intention) {
        r.userInfo.nature = r.intention.nature
      }
      resumeDetail.value.userInfo = r.userInfo
    }
    resumeId.value = r.id;
  }
  const scientificList = ref([])
  onLoad((query : any) => {

    // if (!!query.resume_id) {
    //   getResumeDetail(query.resume_id);
    // } else {
    //   addResume();
    // }
    if (query.resume_id) {
      resumeId.value = query.resume_id || ''
      console.log('简历ID:::', query);
      getResumeDetail(query.resume_id);
    } else {
      addResume();
    }
    resumeDetail.value.highlightsList = otherStore().$state.liangdian
    resumeDetail.value.scientific_school_name = otherStore().$state.school
    // // resumeDetail.value.scientific_qualification = otherStore().$state.keyan
    // let scientificListData = []
    // let keyan = otherStore().$state.keyan
    // let obj = {
    //   ...keyan,
    //   researchExperienceList: [
    //     {
    //       label: '课题时间',
    //       value: keyan.time,
    //     },
    //     {
    //       label: '研究方向',
    //       value: keyan.research_direction,
    //     },
    //     {
    //       label: '研究课题',
    //       value: keyan.research_subject,
    //     },
    //     {
    //       label: '课题描述',
    //       value: keyan.subject_info,
    //     },
    //     {
    //       label: '论文名称',
    //       value: keyan.paper_name,
    //     },
    //   ]
    // }
    // keyan ? scientificListData.push(obj) : scientificListData = []
    // // resumeDetail.value.scientific_qualification = scientificList
    // scientificList.value = scientificListData
    // console.log('科研经历铺数据------:::', scientificListData);

    resumeDetail.value.ShiXi = otherStore().$state.ShiXi
    resumeDetail.value.cer = otherStore().$state.cer
    resumeDetail.value.ry = otherStore().$state.ry
    resumeDetail.value.heart_content = otherStore().$state.data
  });
  onShow(async () => {
    if (resumeId.value) {
      const r = await userResumeUpdate({ id: resumeId.value, intention_id: uni.getStorageSync('preferenceId') });
      getResumeDetail(resumeId.value);
    }

  })
</script>

<style lang="scss" scoped>
  .block-box {
    @apply mx-auto mb-24rpx w-[702rpx] shadow-[0rpx_6rpx_16rpx_0rpx_rgba(191, 191, 191, 0.26)] rounded-[20rpx] bg-#fff p-24rpx;

    &.py-0 {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
</style>
